<template>
  <div id="switch">
    <el-row>
      <el-switch v-model="value2" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
    </el-row>
    <hr>
    <el-row>
      <el-switch v-model="value3" active-text="按月付费" inactive-text="按年付费"></el-switch>
      <el-switch v-model="value4" active-color="#13ce66" inactive-color="#ff4949" active-text="按月付费" inactive-text="按年付费"></el-switch>
    </el-row>
    <hr>
    <el-row>
      <el-tooltip :content="'Switch value:' + value5" placement="top">
        <el-switch v-model="value5" active-color="#13ce66" inactive-color="#ff4949" active-value="100" inactive-value="0"></el-switch>
      </el-tooltip>
    </el-row>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value1: true,
      value2: true,
      value3: true,
      value4: true,
      value5: '100'
    }
  }
}
</script>
